<template>
  <div>
    <vol-box
      :lazy="true"
      :model.sync="model"
      title="订单详情"
      :height="600"
      :width="900"
      :padding="25"
    >
      <div id="printTest">
        <el-row>
          <el-col :span="24">
            <div class="grid-content" style="height: 80px">
              <div class="top">
                <div class="top1">
                  <div style="font-size: 30px">
                    {{ rowDetail.ticketsCode }}
                  </div>
                  <!-- 供应商 -->
                  <div style="font-size: 15.5px">
                    {{ typeObj.supplierProcureCode[rowDetail.supplierProcureCode] }}
                  </div>
                </div>
                <div class="top1">
                  <img id="barcode" />
                </div>
              </div>
              <div class="top2">
                {{ typeObj.isTake[rowDetail.isTake] }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="border: 1px solid #000"> </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="grid-content">订单号：{{ rowDetail.order_number }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">下单时间：{{ rowDetail.createDate }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content">
              预定人姓名：{{ rowDetail.name }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">手机号：{{ rowDetail.bookingPhone }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              证件类型：{{ rowDetail.bookingType ? typeObj.bookingType[rowDetail.bookingType] : '' }}
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">证件号：{{ rowDetail.bookingIdCard || ''}}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div
              class="grid-content"
              style="
                height: 20px;
                width: 130px;
                background-color: hsl(0, 0%, 99%);
              "
            >
              <b>
                <span style="font-size: 17px">订单信息:</span>
              </b>
            </div>
          </el-col>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">
                预定类型：{{ typeObj.reservationType[rowDetail.reservationType] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">
                支付状态：{{ typeObj.is_pay[rowDetail.is_pay] }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">订单类型：{{ typeObj.type[rowDetail.type] }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">订单状态：{{ typeObj.status[rowDetail.status] }}</div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content">
                订单总金额：{{ rowDetail.order_total_price }}
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">商品金额：{{ rowDetail.orderPrice }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">押金金额：{{ rowDetail.paydepositPrice || 0 }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">押金状态：{{ rowDetail.depositAmount}}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div class="grid-content">创建人名称：{{ rowDetail.creator }}</div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content">创建时间：{{ rowDetail.createDate }}</div>
            </el-col>
          </el-row>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div
              class="grid-content bg-purple-dark"
              style="
                height: 20px;
                width: 130px;
                background-color: hsl(0, 0%, 99%);
              "
            >
              <b>
                <span style="font-size: 17px">项目信息:</span>
              </b>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <div :style="{ margin: '0 left' }">
            <el-table
              border
              :data="list"
              min-width="100%"
              show-summary
              :summary-method="getSummaries"
              max-height="500"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              default-expand-all
              row-key="childrenNumber"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <!-- //<el-table-column type="index" min-width="62%" ></el-table-column> -->
              <el-table-column
                prop="playStartDate"
                label="开始日期"
                min-width="14%"
              ></el-table-column>
              <el-table-column
                prop="playEndDate"
                label="结束日期"
                min-width="14%"
              ></el-table-column>
              <el-table-column
                prop="title"
                label="产品名称"
                min-width="15%"
              ></el-table-column>
              <el-table-column
                prop="confirmationNo"
                label="确认号"
                min-width="15%"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="使用人"
                min-width="15%"
              ></el-table-column>
              <el-table-column
                prop="phone"
                label="手机号"
                min-width="17%"
              ></el-table-column>
              <el-table-column
                prop="price"
                label="单价"
                min-width="7%"
              ></el-table-column>
              <el-table-column
                prop="paydepositPrice"
                label="押金"
                min-width="7%"
              ></el-table-column>
              <el-table-column
                prop="num"
                label="数量"
                min-width="7%"
              ></el-table-column>
              <el-table-column
                prop="status"
                label="状态"
                min-width="10%"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    >{{ scope.row.status == 0 ? '未启用' : scope.row.status == 1 ? '已启用' : '已删除'}}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-row>
      </div>
      <div slot="footer" class>
        <Button type="info" v-print="printObj">打印</Button>
        <Button type="info" ghost @click="close">关闭</Button>
      </div>
    </vol-box>
  </div>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
import star from "./start.vue";
import JsBarcode from 'jsbarcode'

export default {
  components: { "vol-box": VolBox, star: star },
  data() {
    return {
      printObj: {
        id: "printTest",
        popTitle: "订单详情",
      },
      loadKey: true,
      row: {},
      //url: "api/App_Expert/getPageData", //后从加载数据的url
      model: false,
      box2: false,
      list: [],
      jsonList: [],
      jlDetShow: false,
      jlDetails: {
        url: "",
        coach: {},
      },
      activeName: "first",
      evaluateData: [],
      numInt: 0,
      afterTwo: 0,
      rowDetail: {},
      typeObj:{
        type:{},
        status:{},
        isTake:{},
        reservationType:{},
        is_pay:{},
        bookingType:{},
        supplierProcureCode: {},
      },
    };
  },
  methods: {
    getJLd(num) {
      // console.log(e);
      // let num = 3.64; // 后端穿过来的数据  最大是5
      let str = num + "";
      this.numInt = Math.ceil(num); // 向上取整数
      let temp = str.split(".")[1]; // 获取小数点数据
      this.afterTwo = temp > 10 ? temp : temp + "0"; // 补零避免出现小数点后一位情况, 也可以在接收        后端数据后进行toFixed(2)
      let numFFF = 5 - this.numInt; // 白色五角星的数量
      console.log(this.numInt);
      return this.numInt;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (
          column.label == "单价" ||
          column.label == "押金" ||
          column.label == "数量" ||
          index == 0
        ) {
          if (index === 0) {
            sums[index] = "总价";
            return;
          }
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += " ";
          } else {
            sums[index] = "N/A";
          }
        }
      });
      sums[6] = Number(sums[6]).toFixed(2);
      return sums;
    },
    getFormOption(field) {
      let option;
      this.$parent.columns.forEach(item => {
        if (item.field == field) {
          option = item;
        }
      });
      return option;
    },
    open(row) {
      this.rowDetail = row;
      this.typeChange();
      let parmas = {
        page: 1,
        rows: 30,
        sort: "code",
        order: "desc",
        value: row.id,
        wheres: `[]`,
      };
      this.http
        .post("/api/Small_procure_order/getDetailPage", parmas)
        .then((x) => {
          this.list = x.rows;
        });
      this.model = true;
      this.$nextTick(() => {
        JsBarcode("#barcode", this.rowDetail.ticketsCode, {
          format: "CODE128",
          lineColor: "#000",
          width: 2,
          height: 50,
          displayValue: false,
        });
      })
    },
    close() {
      this.model = false;
    },
    typeChange() {
      this.getFormOption('type').bind.data.forEach(_=>{
        this.typeObj.type[_.key] = _.value
      })
      this.getFormOption('status').bind.data.forEach(_=>{
        this.typeObj.status[_.key] = _.value
      })
      this.getFormOption('isTake').bind.data.forEach(_=>{
        this.typeObj.isTake[_.key] = _.value
      })
      this.getFormOption('reservationType').bind.data.forEach(_=>{
        this.typeObj.reservationType[_.key] = _.value
      })
      this.getFormOption('is_pay').bind.data.forEach(_=>{
        this.typeObj.is_pay[_.key] = _.value
      })
      this.getFormOption('bookingType').bind.data.forEach(_=>{
        this.typeObj.bookingType[_.key] = _.value
      })
      this.getFormOption('supplierProcureCode').bind.data.forEach(_=>{
        this.typeObj.supplierProcureCode[_.key] = _.value
      })
      console.log(this.typeObj,'this.typeObj');
    }
  },

  mounted() {
  },
};
</script>
<style lang="scss" scoped>
.cont {
  li {
    list-style: none;
    border-bottom: 1px dashed;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
}
.lino {
  li {
    list-style: none;
  }
}

.dtop {
  display: flex;
  .img {
    width: 150px;
  }
  .mrl20 {
    margin-left: 20px;
  }
}
#printTest .el-table__row--level-0 {
  background-color: #ccc !important;
}
#printTest .el-table__row--level-0:hover > td.el-table__cell {
  background-color: #ccc !important;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: hsl(206, 20%, 93%);
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.top1 {
  font-size: 20px;
  float: left;
}

.top {
  font-weight: bold;
}
.top2 {
  font-weight: bold;
  float: right;
  font-size: 25px;
  margin-right: 60px;
  margin-top: 10px;
}
</style>
